<template>
    <div class="MyHeader">
       <span @click.stop="show=!show">{{user}}</span>
       <ul v-show="show">
           <li v-for="(item,index) in roles" :class="{active:check == index}"  :key="index" @click.stop="cut(index,item.type)">
               {{item.name}}
           </li>
           <li :class="{active:check == 3}" @click.stop="cut(3)">退出登录</li>
       </ul>
    </div>
</template>
<script>
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
export default {
  props:{
    roles: Array
  },
  setup(props,{emit}) {
    const { push } = useRouter();
    const show = ref(false); // 控制显示隐藏
    const check = ref(null);
    const user = localStorage.getItem('user');
    onMounted(() => {
       let dom = document.querySelector('body');
       dom.onclick = () => {
          show.value = false;
       }
    })
    const cut = (i,val) => {
      check.value = i;
      if (i == 3) {
        localStorage.removeItem('user');
        push('/');
      } else {
        emit('cut',val);
      }
    }
    return{
      user,
      check,
      cut,
      show
    }
  }  
}
</script>
<style lang="scss" scoped>
.MyHeader{
  height: 60px;
  background: #5f5f5f;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 50px;
  color: #fff;
  position: relative;
  span{
    cursor: pointer;
  }
  ul{
      position: absolute;
      top: 60px;
      right: 25px;
      background: #fff;
      color: #000;
      z-index: 99;
      border: 1px solid #ccc;
      li{
        width: 100px;
        text-align: center;
        line-height: 40px;
        border-bottom: 1px solid #ccc;
        &:last-child{
          border: none;
        }
      }
      .active{
        color: skyblue;
      }
  }
}
</style>


